<template>
  <div class="box">
    <div class="content">
      <!-- 头部 -->
      <div class="content_top">
        <h3 style="margin-left: 30px;font-size: 20px;">住户详情</h3>
      </div>
      <div class="process">
        <p style="margin: 20px 0 0 40px;">审核流程</p>
        <div class="steps">
          <el-steps :active="active">
            <el-step title="提交住户信息" icon="el-icon-circle-check" :description=auditTime></el-step>
            <el-step title="物业审核"></el-step>
            <el-step title="认证通过" style="color: #8D8D8D;"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="means">
        <p style="margin: 20px 0 0 40px;">基础资料</p>
        <div style="margin-top: 20px;margin-left: 40px;">
          <div style="width: 25%;float: left;">
            <div>住户姓名：{{hname}}</div>
            <div style="margin-top: 20px;">住户性别：{{hsex == 0 ? '女' : '男'}}</div>
            <div style="margin-top: 20px;">住户类型：{{householdType}}</div>
            <div style="margin-top: 20px;">提交审核时间：{{auditTime}}</div>
          </div>
          <div style="width: 25%;float: left;margin-left: 100px;">
            <div>住户编号：{{hnumber}}</div>
            <div style="margin-top: 20px;">证件类型：{{documentType}}</div>
            <div style="margin-top: 20px;">备注：{{back}}</div>
            <div style="margin-top: 20px;">注册时间：{{creatTime}}</div>
          </div>
          <div style="width: 25%;float: left;margin-left: 100px;">
            <div>手机号码：{{hphone}}</div>
            <div style="margin-top: 20px;">证件号码：{{documentNumber}}</div>
            <div style="margin-top: 20px;">住户来源：{{sourceOfHouseholds}}</div>
          </div>
        </div>
      </div>
      <div class="botton">
        <p style="margin: 20px 0 0 40px;">审核</p>
        <div style="width: 400px;height: 100px;margin-left: 40px;">
          <span style="line-height: 100px;margin-right: 10px;">审核意见</span>
          <el-input
            type="textarea"
            style="width: 300px;"
            placeholder="请输入内容"
            v-model="examineMessage"
            maxlength="50"
            show-word-limit
          >
          </el-input>
        </div>
        <el-button type="primary" @click="success" style="margin: 30px 0 0 40px">审核通过</el-button>
        <el-button type="danger" @click="errorNo">审核不通过</el-button>
        <el-button @click="backspace">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueExamine',

  data() {
    return {
      id: this.$route.query.examine.id,
      auditTime: this.$route.query.examine.auditTime,
      hname: this.$route.query.examine.hname,
      hnumber: this.$route.query.examine.hnumber,
      hphone: this.$route.query.examine.hphone,
      hsex: this.$route.query.examine.hsex,
      documentType: this.$route.query.examine.documentType,
      documentNumber: this.$route.query.examine.documentNumber,
      householdType: this.$route.query.examine.householdType,
      back: this.$route.query.examine.back,
      sourceOfHouseholds: this.$route.query.examine.sourceOfHouseholds,
      creatTime: this.$route.query.examine.creatTime,
      examineMessage: this.$route.query.examine.examineMessage,
      active: 3
    }
  },

  mounted() {
    console.log(this.$route.query.examine)
    if(this.$route.query.examine.start === 0){
      this.active = 2
    }
  },

  methods: {
    success(){ // 审核通过
      this.$axios.delete('/memberCjq/household/examineStart',{
        params: {
          id: this.id,
          examineMessage: this.examineMessage,
          start: 1
        }
      }).then(res => {
        if(res.data.flag){
          this.MyMessage('审核通过','success')
          this.$router.push('/household')
        }
      })
    },
    errorNo(){ // 审核不通过
      this.$axios.delete('/memberCjq/household/examineStart',{
        params: {
          id: this.id,
          examineMessage: this.examineMessage,
          start: 2
        }
      }).then(res => {
        if(res.data.flag){
          this.MyMessage('审核不通过','error')
          this.$router.push('/household')
        }
      })
    },
    backspace(){
      this.$router.go(-1)
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 1200px;
  font-family: '微软雅黑';
  background: #F0F2F5;
}
.content{
  width: 1200px;
  margin: 0 auto;
  padding-top: 25px;
}
.content_top{
  width: 100%;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  background: #FFF;
}
.process{
  width: 100%;
  height: 200px;
  background: #FFF;
  margin-top: 20px;
  overflow: hidden;
}
.steps{
  width: 1000px;
  margin-top: 50px;
  margin-left: 40px;
}
::v-deep(.el-step__title.is-process){
  color: #8D8D8D;
}
::v-deep(.el-step__head.is-process){
  color: #8D8D8D;
}
.means{
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: #FFF;
  margin-top: 20px;
}
.botton{
  width: 1200px;
  height: 250px;
  overflow: hidden;
  margin-top: 20px;
  background: #FFF;
}
</style>